import { useState } from "react";

// 使用状态变量
const UseStateDemo = () => {
  /* 使用状态变量 */
  const [count, setCount] = useState(0);
  const [form ,setForm]=useState({
    name:'WuLong'
  })

  //   自定义函数修改状态变量
  const setCountFunction = () => {
    // 如果使用count++，数据不会更新，需要使用setCount(count + 1)修改count值
    setCount(count + 1);
  };

  const changeForm=(e:string)=>{
    setForm({
        ...form,
        name:e
    })
  }
  return (
    <>
      {/* 使用箭头函数修改 */}
      <button onClick={() => setCount((count) => count + 1)}>
        count is {count}
      </button>
      {/* 也可以通过调用函数修改 */}
      <button onClick={setCountFunction}>count is {count}</button>

      {/* 复杂数据的两种修改方式 */}
      <input type="text" value={form.name} onChange={(e)=>{setForm({...form,name:e.target.value})}} />{form.name}
      <input type="text" value={form.name} onChange={(e)=>changeForm(e.target.value)} />{form.name}
    </>
  );
};

export default UseStateDemo;
